<template>
  <div class="common-bg">
    <div class="wrap">
      <div class="form">
        <h2>注册</h2>
        <el-form
            :model="registerForm"
            :rules="rules"
            label-width="120px"
            label-position="top"
            ref="ruleForm"
        >
          <el-form-item label="用户名" prop="username">
            <el-input v-model="registerForm.username"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input type="password" v-model="registerForm.password"></el-input>
          </el-form-item>
          <el-form-item label="氏族" prop="team">
            <el-select v-model="registerForm.team" placeholder="氏族">
              <el-option label="一团" value="一团"></el-option>
              <el-option label="二团" value="二团"></el-option>
              <el-option label="三团" value="三团"></el-option>
              <el-option label="四团" value="四团"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="游戏ID" prop="nickname">
            <el-input  v-model="registerForm.nickname"></el-input>
          </el-form-item>
          <el-form-item label="QQ" prop="qq">
            <el-input v-model="registerForm.qq"></el-input>
          </el-form-item>
          <el-form-item label="性别" prop="sex">
            <el-radio-group v-model="registerForm.sex">
              <el-radio label="男" value="男"></el-radio>
              <el-radio label="女" value="女"></el-radio>
            </el-radio-group>
          </el-form-item>

          <div class="opt">
            <el-form-item>
              <el-button type="primary" @click="submitForm('ruleForm')">提交注册</el-button>
              <el-button @click="$router.push('/login')">返回登录</el-button>
            </el-form-item>
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { ElLoading } from "element-plus";
import {reactive, ref, toRefs} from "vue";
import {Register} from "../../api/common";
import {useRoute, useRouter} from "vue-router";
import {useStore} from "vuex";
import {error, success, warning} from "../../utils/message";
export default {
  name: "Register",
  setup(){
    const route = useRoute()
    const router = useRouter()
    const store = useStore()
    const state = reactive({
      ruleForm: ref(null),
      registerForm:{
        username:'',
        password:'',
        nickname:'',
        team:'',
        qq:'',
        sex:ref('男')
      },
      rules:{
        username: [{
          required:true,
          message:"请输入用户名",
          trigger:'blur'
        },{
          min:3,
          max:15,
          message: "请输入3~15个字符",
          trigger: 'blur'
        }],
        password: [{
          required:true,
          message:"请输入密码",
          trigger:'blur'
        },{
          min:3,
          max:15,
          message: "请输入3~15个字符",
          trigger: 'blur'
        }],
        team:[{
          required:true,
          message:"请选择所在氏族",
          trigger:'change'
        }],
        nickname: [{
          required:true,
          message:"请输入游戏ID",
          trigger:'blur'
        },{
          min:3,
          max:25,
          message: "请输入3~25个字符",
          trigger: 'blur'
        }],
        qq:[{
          required:true,
          message:"请输入您的QQ",
          trigger:'blur'
        },{
          min:5,
          max:15,
          message: "请输入正确的QQ号码",
          trigger: 'blur'
        }],
        sex:[{
          required:true,
          message:"请选择您的性别",
          trigger:'change'
        }]
      }
    })

    const methods = {
      submitForm(formName) {
        this.$refs[formName].validate((valid)=>{
          if (valid) {
            methods.doRegister();
          } else {
            warning('请检查表单项')
            return false
          }
        })
      },
      async doRegister(){
        const loading = ElLoading.service({
          lock: true,
          text: 'Loading',
          background: 'rgba(0, 0, 0, 0.7)',
        })
        const { code, data, message } = await Register(state.registerForm)
        if (+code === 200) {
          success('注册成功')
          const targetPath = decodeURIComponent(route.query.redirect)
          if (targetPath.startsWith('http')) {
            // 如果是一个url地址
            window.location.href = targetPath
          } else if (targetPath.startsWith('/')) {
            // 如果是内部路由地址
            router.push(targetPath)
          } else {
            router.push('/')
          }
          store.commit('app/setToken', data)
        } else {
          error(message)
        }
        loading.close()
      }
    }

    return {
      ...toRefs(state),
      ...methods
    }
  }
}
</script>

<style scoped>
.wrap {
  width: 45%;
  height: auto;
  min-width: 360px;
  position: absolute;
  top:0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  background: rgba(255,255,255,.7);
  border-radius: 5px;
}
.form {
  padding: 0 40px;
}
.form h2{
  display: block;
  text-align: center;
  margin: 40px;

}
.opt{
  padding: 35px 0;
}
</style>